<template>
    <div class="rank-list-layout main-layout">
        <div class="top-pics">
          <img class="logo" src="../../base/images/LOGO_home@2x.png" alt="">
          <img class="title" src="../../base/images/title@2x.png" alt="">
        </div>
        <div class="rank-list-layout-list">
            <div class="rank-list-layout-banner hide">答题排行榜</div>
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <th>名次</th><th>昵称</th><th>黄桷兰数量</th>
                </tr>
                <tr v-for="(item,index) in rankList" >
                    <td class="lg-font">{{index+1}}</td>
                    <td>
                        <img class="avandor" v-bind:src="avandorSrc" >
                        {{item.name}}
                    </td>
                    <td class="reward-bg lg-font">
                       
                       {{item.rewardsNum}}  <img class="medal" src="../../base/images/medal.png" alt="">
                    </td>
                </tr>
            </table>
        </div>
        <button class="main"><router-link to="/personal-center">返回</router-link></button>
        <div class="bottom-logos">
            <img src="../../base/images/bottom_logo@2x.png" alt="">
        </div>
    </div>
</template>
<script>
    var avandorImg=require('base/images/avandor.png');
    module.exports={
        data:function(){
            return {
                avandorSrc:avandorImg,
                rankList:[
                    /*{avandorSrc:avandorImg,name:'绿安科技',rewardsNum:10},
                    {avandorSrc:avandorImg,name:'绿安科技',rewardsNum:10},
                    {avandorSrc:avandorImg,name:'绿安科技',rewardsNum:10},*/
                ]
            }
        },
        created:function(){
            var _this=this;
            $.post("/wx/rank",{},function (data) {
                if(data.code == 200){
                    var d = data.data;
                    for(var i=0;i<d.list.length;i++){
                        var dd = {avandorSrc:d.list[i].headImg,name:d.list[i].nickName,rewardsNum:d.list[i].score};
                        _this.rankList.push(dd);
                    }
                }
            },"json");

        }
    }
</script>
<style lang="less">
    .rank-list-layout{
        
        .rank-list-layout-banner{
            width:70%;
            margin:0 auto;
            text-align: center;
            background-image: url("../../base/images/banner.png");
            background-repeat: no-repeat;
            background-size: 100%;
            color:#FFFD88;
            height:32px;
            box-sizing: border-box;
            padding-top:5px;
            background-position: center;
            position: relative;
            top:-15px;
        }
        .rank-list-layout-list{
            background-color: white;
            border-radius: 5px;
            margin:0 auto 2.9vh;
            width:94.7vw;
            max-height: 65vh;
            overflow: auto;
            table {
                 width:90%;
                margin:0 auto;

                .avandor{
                    width:30px;
                    height:30px;
                    vertical-align: middle;
                    margin-right:5px;
                }
                .reward-bg{
                    // background-image: url("../../base/images/medal.png");
                    // background-repeat: no-repeat;
                    // background-size: auto 30px;
                    // padding:10px 10px 10px 30px;
                    // background-position:left center;

                    .medal{
                        width: 5.9vw;
                        vertical-align: middle;
                        margin-left: 3px;
                    }
                }
                td{
                    border-bottom:1px solid #C8C7CC;
                    padding:10px 0px;
                    font-size: 15px;
                }
                th{
                    font-weight: normal;
                    border-bottom: 1px solid #C8C7CC;
                    padding:10px 0px;
                    text-align: left;
                    font-size: 14.4px;
                }
                tr td:first-child{
                    color:#FF513B;
                    font-weight: bold;
                }

                tr th:last-child{
                    text-align: right;
                }
                tr td:last-child{
                    color:#FF513B;
                    text-align: right;
                }
            }
        }


    }
</style>